// 仪表盘实现
// 饼状图
function setPie(arr) {
  const myChart = echarts.init(document.querySelector('.pie'))
  const option = {
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6D767E'
      }
    },
    // 提示组件
    tooltip: {
      formatter: '{a}<br>{b}<b>{c}</b>人 占比{d}%'
    },
    series: [
      {
        name: '各地人员分布',
        type: 'pie',
        // 半径 [内圆，外圆]
        radius: [ '10%', '60%' ],
        // 圆心位置
        center: [ '50%', '50%' ],
        // 面积模式或者半径模式  产品经理决定
        roseType: 'area',
        itemStyle: {
          // 扇形圆角
          borderRadius: 4
        },
        data: arr
      }
    ]
  }
  myChart.setOption(option)
}

// setPie()

// 折线图
function setLine(obj) {
  const myChart = echarts.init(document.querySelector('.line'))
  const option = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [ pt[0], '10%' ]
      }
    },
    title: {
      text: '薪资Salary',
      textStyle: {
        color: '#6D767E'
      }
    },
    // 图例组件
    legend: {
      top: 20
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // 两侧是否留白
      data: obj.name
    },
    yAxis: {
      type: 'value',
      boundaryGap: [ 0, '10%' ] // Y轴留白影响最大值最小值
    },
    // 缩放
    dataZoom: [
      {
        type: 'inside', // inside 鼠标滚轮实现缩放
        start: 0, // 起始位置
        end: 10 // 结束位置
      },
      {
        type: 'slider', // silder 滑动条实现缩放 默认值
        start: 0,
        end: 10
      }
    ],
    series: [
      {
        name: '期望薪资',
        type: 'line',
        symbol: 'node', // 拐点形状
        smooth: true, // 拐点平滑
        itemStyle: {
          color: '#EE6666'
        },
        data: obj.salary
      },
      {
        name: '实际薪资',
        type: 'line',
        symbol: 'none',
        smooth: true,
        itemStyle: {
          color: '#5470C6'
        },
        data: obj.truesalary
      }
    ]
  }
  myChart.setOption(option)
}

// setLine()

// 柱形图
function setBar(obj) {
  const myChart = echarts.init(document.querySelector('.barChart'))
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross', // 十字标线
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {},
    // 网格
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    xAxis: [
      {
        type: 'category',
        data: obj.group,
        axisPointer: {
          type: 'shadow' // 鼠标在x轴上有阴影
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 100,
        interval: 10, // 间隔
        axisLabel: {
          formatter: '{value}分'
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value}人'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        yAxisIndex: 0, // 0是第一个Y轴，1是第二个Y轴
        barWidth: 15, // 柱子宽度
        data: obj.avgScore
      },
      {
        name: '低于60分人数',
        type: 'bar',
        yAxisIndex: 1,
        data: obj.lt60
      },
      {
        name: '60到80分之间',
        type: 'bar',
        yAxisIndex: 1,
        data: obj.gt60
      },
      {
        name: '高于80分人数',
        type: 'bar',
        yAxisIndex: 1,
        data: obj.gt80
      }
    ]
  }
  myChart.setOption(option)
}

// setBar()

// 设置地图(借助社区)
function setMap(arr1, arr2) {
  const myChart = echarts.init(document.querySelector('.map'))
  
  // 位置 + 经纬度
  const chinaGeoCoordMap = arr1
  const chinaDatas = arr2
  const convertData = function (data) {
    const res = []
    for (let i = 0; i < data.length; i++) {
      let dataItem = data[i]
      let fromCoord = chinaGeoCoordMap[dataItem[0].name]
      let toCoord = [ 116.4551, 40.2539 ] // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([ {
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord
        } ])
      }
    }
    return res
  }
  const series = [];
  [ [ '顺义校区', chinaDatas ] ].forEach(function (item, i) {
    series.push({
              type: 'lines',
              zlevel: 2,
              effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 5 //图标大小
              },
              lineStyle: {
                normal: {
                  width: 1, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0.2 //尾迹线条曲直度
                }
              },
              data: convertData(item[1])
            }, {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: { //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
              },
              label: {
                normal: {
                  show: true,
                  position: 'right', //显示位置
                  offset: [ 5, 0 ], //偏移设置
                  formatter: function (params) {//圆环显示文字
                    return params.data.name
                  },
                  fontSize: 12
                },
                emphasis: {
                  show: true
                }
              },
              symbol: 'circle',
              symbolSize: function (val) {
                return 4 + val[2] * 5 //圆环大小
              },
              itemStyle: {
                normal: {
                  show: false,
                  color: '#F00'
                }
              },
              data: item[1].map(function (dataItem) {
                return {
                  name: dataItem[0].name,
                  value: chinaGeoCoordMap[dataItem[0].name].concat([ dataItem[0].value ])
                }
              })
            },
            //被攻击点
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 4
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  offset: [ 5, 0 ],
                  color: '#9ECA7F', // 目标点文字颜色
                  formatter: '{b}',
                  textStyle: {
                    color: '#9ECA7F'
                  }
                },
                emphasis: {
                  show: true,
                  color: '#F60' // 目标点鼠标移入的颜色
                }
              },
              symbol: 'pin',
              symbolSize: 50,
              data: [ {
                name: item[0],
                value: chinaGeoCoordMap[item[0]].concat([ 10 ])
              } ]
            }
    )
  })
  const option = {
    title: {
      text: '来京路线 From',
      textStyle: {
        color: '#6D767E'
      }
    },
    // tooltip: {
    //   trigger: 'item',
    //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
    //   borderColor: '#FFFFCC',
    //   showDelay: 0,
    //   hideDelay: 0,
    //   enterable: true,
    //   transitionDuration: 0,
    //   extraCssText: 'z-index:100',
    //   formatter: function (params, ticket, callback) {
    //     //根据业务自己拓展要显示的内容
    //     var res = "";
    //     var name = params.name;
    //     var value = params.value[params.seriesIndex + 1];
    //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
    //     return res;
    //   }
    // },
    // backgroundColor: "#013954",
    // visualMap: { //图例值控制
    //   min: 0,
    //   max: 1,
    //   calculable: true,
    //   show: false,
    //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
    //   textStyle: {
    //     color: '#fff'
    //   }
    // },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          /*  color: 'rgba(51, 69, 89, .5)', //地图背景色
           color: '#5a6fc0', //地图背景色
           borderColor: '#516a89', //省市边界线00fcff 516a89
           */
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  }
  myChart.setOption(option)
}

// setMap()

// 页面加载，发送请求获取班级概况
axios({
  url: '/student/overview',
  method: 'GET'
}).then(({ data: res }) => {
  if (res.code === 0) {
    document.querySelector('.total').innerHTML = res.data.total
    document.querySelector('.avgSalary').innerHTML = res.data.avgSalary
    document.querySelector('.avgAge').innerHTML = res.data.avgAge
    document.querySelector('.proportion').innerHTML = res.data.proportion
  }
})

// 点击柱形图旁边的三个点显石隐藏成绩
const btn = document.querySelector('.bar .btn')
const batch = document.querySelector('#batch')
btn.addEventListener('click', function () {
  if (batch.style.display === 'none') {
    batch.style.display = 'block'
  } else {
    batch.style.display = 'none'
  }
})

// 为每次成绩绑定点击事件
const lis = batch.querySelectorAll('li')
for (let i = 0; i < lis.length; i++) {
  lis[i].addEventListener('click', function () {
    // 发送请求获取成绩
    axios({
      url: '/score/batch',
      method: 'GET',
      params: { batch: i + 1 }
    }).then(({ data: res }) => {
      if (res.code === 0) {
        // 调用柱形图函数，传入对应参数，渲染数据
        setBar(res.data)
      }
    })
  })
}

// 页面加载渲染第一次成绩
lis[0].click()

// 折线图、饼图、地图数据渲染
axios({
  url: '/student/list',
  method: 'GET'
}).then(({ data: res }) => {
  if (res.code === 0) {
    // console.log(res)
    // 折线图数据
    const lineData = { name: [], salary: [], truesalary: [] }
    // 饼图数据
    const pieData = []
    // 地图数据
    const mapData1 = { '顺义校区': [ 116.4551, 40.2539 ] } // 默认校区
    const mapData2 = []
    res.data.forEach(ele => {
      lineData.name.push(ele.name)
      lineData.salary.push(ele.salary)
      lineData.truesalary.push(ele.truesalary)
      // 根据条件查询数组中元素索引值
      let index = pieData.findIndex(item => item.name === ele.province)
      if (index === -1) {
        // 不存在该省份的人，添加
        pieData.push({ value: 1, name: ele.province })
      } else {
        // 存在该省份的人，直接+1
        pieData[index].value++
      }
      mapData1[ele.county] = [ ele.jing, ele.wei ]
      // 学生对象county属性值如果和数组元素的第一个对象中的name属性值相同，返回索引
      let i = mapData2.findIndex(item => item[0].name === ele.county)
      if (i === -1) {
        // 没有找到，添加
        mapData2.push([ { name: ele.county, value: 1 } ])
      } else {
        // 找到了，添加
        mapData2[i][0].value++
      }
    })
    // 渲染
    setLine(lineData)
    setPie(pieData)
    setMap(mapData1, mapData2)
  }
})